<template>
	<div class="show">
		<ul class="goodsList">
			<li v-for="item in goodsList">
				<img :src="item.img" />
				<p>{{ item.goodName }}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name: "show",
		data(){ 
			var _this = this;
			this.$http.get("json/sj.json").then(function(res){
				_this.goodsList = res.data;
			})
			return {
				goodsList: []
			}
		},
		props:{
			goodId: Number
		},
		watch:{
			goodId(){
				debugger
				var _this = this;
				var url = "json/sj.json"
				if(_this.goodId == 1)
					url = "json/sj.json";
				else if(_this.goodId == 2)
					url = "json/dn.json";
				this.$http.get(url).then(function(res){
					_this.goodsList = res.data;
				})
				return {
					goodsList: []
				}
			}
		}
	}
</script>

<style>
	.goodsList li{
		width: 200px;
		height: 200px;
		list-style: none;
		float: left;
		font-size: 9px;
		color: red;
		margin-bottom: 10px;
		margin-top: 5px;
	}
	.goodsList img{
		width: 180px;
		height: 180px;
	}
</style>
